<template>
	<u-mask :show="show" @click="closePacket">
		<view class="packet-modal">
			<view class="top">
				<image src="https://xyshop.outletds.com/img/close.png" mode="aspectFit"></image>
			</view>
			<view class="num">
				<count-up :duration="5000" v-if="isStart"  :end-val="max"  @end="receive" ref="countUp"></count-up>
				<view v-else class="money">???.??</view>
				<view class="label">元</view>
			</view>
			<view class="button" @click.stop="getPacket">{{btnName}}</view>
		</view>
	</u-mask>
</template>

<script>
	import {packetMoneyApi, recivePacketApi} from "@/api/my.js"
	import CountUp from "@/components/count_up/count_up.vue"
	import {mapState} from 'vuex'
	export default{
		props: {
			showAD: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				isStart: false,
				max: 0,
				// 0-未领取状态 1-领取成功,-1-无领取资格
				status: 0,
				show: false,
			}
		},
		// mixins: [dialogSyncClose()],
		computed: {
			...mapState('common', ['config']),
			btnName(){
				console.log(this.status);
				let str = ""
				switch(this.status){
					case -1:
					case 0: str = '立即领取'
						break
					case 1: str = "领取成功"
						break
				}
				return str
			}
		},
		components: {CountUp},
		created() {
			this.getMoney()
		},
		methods: {
			// 开始转动红包金额
			getPacket(){
				if(this.status === -1){
					const path = this.config.red_envelope_pah
					if(path.indexOf('tabs') !== -1){
						this.$Router.pushTab(path)
					}else{
						this.$Router.push(path)
					}
					return
				}
				// 不可重复领取
				if(this.status === 1){
					this.show = false
					return
				}
				this.isStart = true
				this.$nextTick(()=>{
					// this.$refs.countNum.start()
				})
			},
			async receive(){
				console.log('可以领取了');
				let res = await recivePacketApi({amount: this.max})
				this.$utils.success('领取成功')
				this.status = 1
			},
			jumpPage(){
				this.$utils.toast('您还没有领取资格')
				setTimeout(()=>{
					// 页面跳转
				}, 1500)
			},
			closePacket(){
				if(this.status !== 0){
					// #ifdef H5
					this.show = false
					// #endif
					this.$utils.modal({
						content: '确认关闭领取页面吗？关闭后今天的红包将与你擦肩而过',
						cancel: ()=>{
							// #ifdef H5
							this.show = true
							// #endif
						},
						confirm: ()=>{
							this.confusedPacket()
						}
					})
					return
				}
				if(this.$refs.count){
					this.$refs.count.stopCount()
				}
				this.show= false
			},
			// 拒绝红包
			async confusedPacket(){
				let res = await recivePacketApi({state: 0, amount: this.max})
				this.$utils.toast('你放弃了红包领取')
				this.show = false
			},
			getMoney(){
				if(!this.showAD) return
				if(this.$utils.storage.get("token")){
					packetMoneyApi().then(({data})=>{
						this.max = data.red_envelope
						console.log(this.max);
						this.status = 0
						this.show = true
					}).catch(({code})=>{
						// 没有参加活动的资格
						if(code == 4000){
							this.status = -1
							this.show = true
						}else{
							this.$emit('nullPacket')
						}
					})
					
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	$price-color: #EB0200;
	.packet-modal{
		background-image: url('https://shop.outletds.com/images/red.png');
		background-size: contain;
		width: 721rpx;
		height: 810rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		.button{
			background-image: url('https://shop.outletds.com/images/button.png');
			background-size: contain;
			background-repeat: no-repeat;
			width: 430rpx;
			height: 91rpx;
			text-align: center;
			font-weight: bold;
			letter-spacing: 2rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #871C0F;
			position: absolute;
			bottom: 160rpx;
			left: 50%;
			transform: translateX(-52%);
		}
		.num{
			position: absolute;
			top: 180rpx;
			display: flex;
			align-items: flex-end;
			.label{
				margin-left: 9rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: $price-color;
			}
			.money{
				font-size: 72rpx;
				font-weight: bold;
				color: $price-color;
			}
		}
		.close{
			position: absolute;
			right: 40rpx;
		}
	}
	.top{
		width: 617rpx;
		text-align: right;
		padding: 0 20rpx;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>